<template>
    <main>
        <div class="support-hero ml-wrapper">
            <div class="container">
                <div class="left"><h1>{{$t('support_index_title')}}</h1>
                    <div class="tips">{{$t('support_index_desc')}}</div>
                </div>
                <div class="contact"><a class="item" href="/r/join-qq"><i class="ri-qq-fill"></i> {{$t('support_index_right_li_1')}}: 664826073</a>
                    <div class="item wechat" @mouseover="qrCode = true" @mouseout="qrCode = false"><img src="https://malus.s3cdn.net/uploads/wechat-malus.jpg" alt="wechat" :style="{display: qrCode ? 'block' : '', opacity: qrCode ? 1 : 0, zIndex: qrCode ? 999 : 0}">
                        <i
                            class="ri-wechat-fill"></i> {{$t('support_index_right_li_2')}}：Malus加速器
                    </div>
                    <a class="item" href="mailto:hi@gmail.com"><i class="ri-mail-fill"></i>
                        {{$t('support_index_right_li_3')}}：hi@getmalus.com</a>
                </div>
            </div>
        </div>
        <div class="ml-wrapper support-wrapper"><!--分类列表，类似notion即可-->
            <div class="container">
                <div class="support-cates">
                    <div class="title">新手入门</div>
                    <ul>
                        <li><a
                            href="/support/Malus%20%E6%96%B0%E6%89%8B%E6%8C%87%E5%8D%97%EF%BC%8C%E5%85%A8%E5%B9%B3%E5%8F%B0%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B/1"
                            title="Malus 新手指南，全平台安装教程">Malus 新手指南，全平台安装教程</a></li>
                        <li><a
                            href="/support/Windows%20%E7%94%B5%E8%84%91%E5%AE%89%E8%A3%85%20Malus%20%E6%95%99%E7%A8%8B/2"
                            title="Windows 电脑安装 Malus 教程">Windows 电脑安装 Malus 教程</a></li>
                        <li><a
                            href="/support/%E8%8B%B9%E6%9E%9C%E7%94%B5%E8%84%91%20Mac%20%E5%AE%89%E8%A3%85%20Malus%E6%95%99%E7%A8%8B/3"
                            title="苹果电脑 Mac 安装 Malus教程">苹果电脑 Mac 安装 Malus教程</a></li>
                        <li><a
                            href="/support/Chrome%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AE%89%E8%A3%85%20Malus%20%E6%95%99%E7%A8%8B/4"
                            title="Chrome 浏览器安装 Malus 教程">Chrome 浏览器安装 Malus 教程</a></li>
                        <li><a
                            href="/support/%E8%8B%B9%E6%9E%9C%20iPhone%2FiPad%20%E5%AE%89%E8%A3%85%20Malus%20%E6%95%99%E7%A8%8B/5"
                            title="苹果 iPhone/iPad 安装 Malus 教程">苹果 iPhone/iPad 安装 Malus 教程</a></li>
                        <li><a
                            href="/support/%E5%AE%89%E5%8D%93%20Android%20%E6%89%8B%E6%9C%BA%E5%AE%89%E8%A3%85%20Malus%E6%95%99%E7%A8%8B/6"
                            title="安卓 Android 手机安装 Malus教程">安卓 Android 手机安装 Malus教程</a></li>
                        <li><a
                            href="/support/%E5%AE%89%E5%8D%93%20TV%20%E5%AE%89%E8%A3%85%20Malus%20%E6%95%99%E7%A8%8B/7"
                            title="安卓 TV 安装 Malus 教程">安卓 TV 安装 Malus 教程</a></li>
                        <li><a
                            href="/support/%E5%AE%89%E5%8D%93TV%E9%83%BD%E5%85%BC%E5%AE%B9%E5%93%AA%E4%BA%9B%E8%AE%BE%E5%A4%87/8"
                            title="安卓TV都兼容哪些设备">安卓TV都兼容哪些设备</a></li>
                        <li><a
                            href="/support/%E5%AE%89%E5%8D%93%E7%B3%BB%E7%BB%9F%E6%97%A0%E6%B3%95%E7%82%B9%E5%87%BB%E2%80%9CVPN%E8%BF%9E%E6%8E%A5%E8%AF%B7%E6%B1%82%E2%80%9D/9"
                            title="安卓系统无法点击“VPN连接请求”">安卓系统无法点击“VPN连接请求”</a></li>
                        <li><a
                            href="/support/iPhone%2FiPad%E5%A6%82%E4%BD%95%E6%89%93%E5%BC%80Malus%E7%BD%91%E7%BB%9C%E8%AE%BF%E9%97%AE/10"
                            title="iPhone/iPad如何打开Malus网络访问">iPhone/iPad如何打开Malus网络访问</a></li>
                        <li><a
                            href="/support/%E5%A6%82%E4%BD%95%E5%8C%BA%E5%88%86%E6%AD%A3%E7%89%88Malus%E5%92%8C%E7%9B%97%E7%89%88Malus/38"
                            title="如何区分正版Malus和盗版Malus">如何区分正版Malus和盗版Malus</a></li>
                        <li><a
                            href="/support/Windows%E7%94%B5%E8%84%91%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8Malus%E5%8A%A0%E9%80%9F%E5%9B%BD%E6%9C%8D%E6%B8%B8%E6%88%8F/47"
                            title="Windows电脑如何使用Malus加速国服游戏">Windows电脑如何使用Malus加速国服游戏</a></li>
                        <li><a
                            href="/support/%E6%96%B0%E6%89%8B%E6%95%99%E7%A8%8B%EF%BC%8C%E5%A6%82%E4%BD%95%E6%B3%A8%E5%86%8CMalus/58"
                            title="新手教程，如何注册Malus">新手教程，如何注册Malus</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
</template>

<script>
export default {
    name: "Support",
    data () {
        return {
            qrCode: false
        }
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .support-hero {
        padding-top: 108px!important;
        padding-bottom: 40px!important;
        .container {
            flex-direction: column;
            justify-content: flex-start!important;
            align-items: flex-start!important;
            .left h1 {
                font-size: 30px!important;
            }
            .contact {
                margin: 16px 0 0!important;
                padding: 0!important;
                border: none!important;
            }
        }
    }
    .support-wrapper {
        ul {
            li {
                width: 100%!important;
                list-style-type: circle;
            }
            li:last-child {
                border: none!important;
            }
        }
    }
}
main {
    .support-hero {
        padding-top: 68px;
        background: linear-gradient(
                360deg, #f8f9ff 0, #f3f4ff 100%);

        .container {
            margin-top: -16px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 100%;
            min-height: 232px;

            .left {
                h1 {
                    font-size: 36px;
                }

                .tips {
                    margin-top: 8px;
                    font-size: 14px;
                    color: #444;
                    line-height: 1.76;
                }
            }

            .contact {
                margin-left: 64px;
                padding-left: 64px;
                border-left: 1px solid #dadcff;

                .item {
                    margin-top: 8px;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    color: #333;
                    transition: all .2s ease;
                    cursor: pointer;
                    position: relative;

                    i {
                        font-size: 18px;
                        color: #4D55E8;
                        margin-right: 12px;
                    }
                }
                .item:hover {
                    color: #4D55E8;
                }

                .wechat {
                    position: relative;

                    img {
                        display: none;
                        position: absolute;
                        top: 20px;
                        left: 32px;
                        z-index: -99;
                        opacity: 0;
                        width: 160px;
                        border: 6px solid #07BB07;
                        transition: all .2s ease;
                    }
                }
            }
        }
    }
    .support-wrapper {
        .container {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            margin-top: 64px;
            margin-bottom: 24px;
            align-items: flex-start;
            .support-cates {
                .title {
                    font-size: 24px;
                    font-weight: 500;
                    color: #333;
                }
                ul {
                    margin-top: 24px;
                    margin-bottom: 40px;
                    padding-bottom: 40px;
                    border-bottom: 1px solid #f1f1f1;
                    padding-left: 20px;
                    display: flex;
                    flex-wrap: wrap;
                    li {
                        margin-right: 32px;
                        color: #7b7b7b;
                        font-size: 12px;
                        width: 30%;
                        a {
                            display: block;
                            margin-top: 16px;
                            color: #333;
                            font-size: 14px;
                            transition: all .2s ease;
                        }
                        a:hover {
                            color: #4D55E8;
                        }
                    }
                }
            }
        }
    }
}
</style>
